/*
 * @Description: 批次鉴定弹窗
 * @Author: Rfan
 * @Date: 2022-07-30 16:48:02
 * @LastEditTime: 2022-07-30 16:48:02
 */

import { useEffect, useState } from 'react';
import { Button, Descriptions, Modal, Tabs } from 'antd';
import classNames from 'classnames/bind';
import { formatDate } from '@/utils';
import ListPane from './components/ListPane';
import GroupPane from './components/GroupPane';
import AttachmentPane from './components/AttachmentPane';
import type { ICommonDialog } from '@/interfaces/global';
import type { IBatchItemResponse } from '@/api/archives/disposition';
import styles from '../../../styles/doAppraisalDialog.module.scss';

const cx = classNames.bind(styles);
const { TabPane } = Tabs;

interface IAppraisalDialogProps extends ICommonDialog {
  data: IBatchItemResponse;
}

const AppraisalDialog = (props: IAppraisalDialogProps) => {
  const { visible, data, onClose } = props;

  const [groupList, setGroupList] = useState([]);
  // const [attachmentList, setAttachmentList] = useState([]);

  useEffect(() => {
    if (visible) {
      setGroupList(data.appraiserList);
      // setAttachmentList(data.attachmentList);
    }
  }, [visible]);
  /**
   * @description: 关闭借阅详情弹窗
   */
  const onCancel = () => {
    onClose();
  };

  /**
   * @description: 打开预览弹窗
   */
  // const showPreviewDialog = () => {};

  return (
    <Modal
      title="档案鉴定"
      visible={visible}
      width={800}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
        <Button key="save" onClick={onCancel}>
          保存
        </Button>,
        <Button key="submit" type="primary" onClick={onCancel}>
          提交审核
        </Button>
      ]}
    >
      <div className={cx('info')}>
        <Descriptions size="middle" column={12}>
          <Descriptions.Item label="鉴定批次标题" span={4}>
            {data.batchName}
          </Descriptions.Item>
          <Descriptions.Item label="所属全宗" span={4}>
            {data.fondName}
          </Descriptions.Item>
          <Descriptions.Item label="档案类型" span={4}>
            {data.atName}
          </Descriptions.Item>
          <Descriptions.Item label="鉴定类型" span={4}>
            {}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间" span={4}>
            {formatDate(data.createTime)}
          </Descriptions.Item>
          <Descriptions.Item label="完成时间" span={4}>
            {}
          </Descriptions.Item>
          <Descriptions.Item label="鉴定目的">{data.remark}</Descriptions.Item>
        </Descriptions>
      </div>
      <div className={cx('list')}>
        <Tabs>
          <TabPane tab="移交档案列表" key="list">
            <ListPane visible={visible} batchId={data?.id} />
          </TabPane>
          <TabPane tab="鉴定小组" key="group">
            <GroupPane list={groupList} setList={setGroupList} />
          </TabPane>
          <TabPane tab="附件" key="attachment">
            <AttachmentPane />
          </TabPane>
        </Tabs>
      </div>
    </Modal>
  );
};

export default AppraisalDialog;
